﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VisualizacionDeComerciosBT.aspx.cs" Inherits="Web_Guia_Digital_Georeferenciada.VisualizacionDeComerciosBT" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Bootply" />
    <meta charset="utf-8" />

    <title>Guía Georeferenciada</title>

    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="Content/bootstrap.min.js"></script>
    <script src="Content/scriptsPrincipal.js"></script>
    <link href="Content/stylesPrincipal.css" rel="stylesheet" />
    <link href="Content/Carousel.css" rel="stylesheet" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" />

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../Content/star-rating.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="Content/GlobalScreen.css" />
    <link rel="stylesheet" type="text/css" href="Content/fichas.css" />


    <script type="text/javascript">
        var map; var infowindow;
        var marcadores = []; var Items = [];
        var markerInicial;
        var ComId;

        function Initialize() {

            var lt = getParameterByName('latitud');
            var lg = getParameterByName('longitud');
            ComId = getParameterByName('ComId');

            var latlng = new google.maps.LatLng(lt, lg);
            var myOptions =
            {
                zoom: 17,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

            // CREACION DEL MARCADOR  
            markerInicial = new google.maps.Marker({
                position: latlng,
                map: map,
                draggable: false
            });

            CargarComentarios();

            if (ComId > 0) {
                var param = "{'ComId':" + JSON.stringify(ComId) + "}";

                $.ajax({
                    type: "POST",
                    url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/CargarDescripcion") %>',
                    data: param,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $('#Dinamico').append('<div id="contenedorDinamico">' + data.d + '</div>');
                    },
                    error: SetTabSessionValueFailed
                });
            }
            /*  $('#idpuntuacion').rating('update', 3);*/
            $('#idpuntuacion').rating('refresh', { showClear: false, showCaption: false });


            $('#btnInformacion').click(function (e) {
                $('#btnTags').removeClass('active');
                $('#btnRubros').removeClass('active');
                $('#btnSucursales').removeClass('active');
                $('#btnInformacion').addClass('active');
                $('#contenedorDinamico').remove();

                $('#cabezalDinamico').text('Descripción');


                if (ComId > 0) {
                    var param = "{'ComId':" + JSON.stringify(ComId) + "}";

                    $.ajax({
                        type: "POST",
                        url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/CargarDescripcion") %>',
                        data: param,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $('#Dinamico').append('<div id="contenedorDinamico">' + data.d + '</div>');
                        },
                        error: SetTabSessionValueFailed
                    });
                }
            });
            $('#btnTags').click(function (e) {
                $('#btnInformacion').removeClass('active');
                $('#btnRubros').removeClass('active');
                $('#btnSucursales').removeClass('active');
                $('#btnTags').addClass('active');
                $('#cabezalDinamico').text('Tags');
                $('#contenedorDinamico').remove();

                if (ComId > 0) {
                    var param = "{'ComId':" + JSON.stringify(ComId) + "}";

                    $.ajax({
                        type: "POST",
                        url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/CargarTags") %>',
                        data: param,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            jQuery.each(data, function (index, item) {
                                if (item.length > 0) {
                                    CargarTags(item);
                                }

                            });
                        },
                        error: SetTabSessionValueFailed
                    });
                }

            });
            $('#btnRubros').click(function (e) {
                $('#btnTags').removeClass('active');
                $('#btnInformacion').removeClass('active');
                $('#btnSucursales').removeClass('active');
                $('#btnRubros').addClass('active');
                $('#cabezalDinamico').text('Rubros');
                $('#contenedorDinamico').remove();

                if (ComId > 0) {
                    var param = "{'ComId':" + JSON.stringify(ComId) + "}";

                    $.ajax({
                        type: "POST",
                        url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/CargarRubros") %>',
                        data: param,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            jQuery.each(data, function (index, item) {
                                if (item.length > 0) {
                                    CargarRubros(item);
                                }

                            });
                        },
                        error: SetTabSessionValueFailed
                    });
                }



            });
            $('#btnSucursales').click(function (e) {
                $('#btnTags').removeClass('active');
                $('#btnRubros').removeClass('active');
                $('#btnInformacion').removeClass('active');
                $('#btnSucursales').addClass('active');
                $('#cabezalDinamico').text('Sucursales');
                $('#contenedorDinamico').remove();

                if (ComId > 0) {
                    var param = "{'ComId':" + JSON.stringify(ComId) + "}";

                    $.ajax({
                        type: "POST",
                        url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/CargarSucursales") %>',
                        data: param,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            jQuery.each(data, function (index, item) {
                                if (item.length > 0) {
                                    CargarSucursales(item);
                                }

                            });
                        },
                        error: SetTabSessionValueFailed
                    });
                }
            });

        }

        function CargarTags(item) {

            var div;

            div = "<div id='contenedorDinamico'>";
            for (var i = 0; i <= item.length - 1; i++) {

                div += '<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-tag" aria-hidden="true">' +
                       '</span>' + item[i].TagNombre + '</button>';
            }

            div += '</div>';
            $('#Dinamico').append(div);

        }
        function CargarRubros(item) {
            var div;

            div = "<div id='contenedorDinamico'>";
            for (var i = 0; i <= item.length - 1; i++) {

                div += '<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-registration-mark" aria-hidden="true">' +
                       '</span>' + item[i].RubNombre + '</button>';
            }

            div += '</div>';
            $('#Dinamico').append(div);
        }
        function CargarSucursales(item) {
            var div;

            div = "<div id='contenedorDinamico'>";
            for (var i = 0; i <= item.length - 1; i++) {

                div += '<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-home" aria-hidden="true">' +
                       '</span>' + item[i].ComercioNombre + '</button>';
            }

            div += '</div>';
            $('#Dinamico').append(div);
        }




        function CargarComentarios() {

            if (ComId > 0) {
                var param = "{'ComId':" + JSON.stringify(ComId) + "}";

                $.ajax({
                    type: "POST",
                    url: '<%=ResolveUrl("~/Mantenimientos/ServiciosAutocompletado.asmx/BuscarComentarios") %>',
                    data: param,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        jQuery.each(data, function (index, item) {
                            items = item;
                            if (item.length > 0) {
                                ArmarLista(item);
                            }

                        });
                    },
                    error: SetTabSessionValueFailed
                });

            }
        }

        function ArmarLista(item) {
            var div;
            $('#contenidoLista').remove();

            div = " <div id='contenidoLista'>";

            for (var i = 0; i <= item.length - 1; i++) {
                div += "<li class='list-group-item'><span><b>" + item[i].ClienteNombre + "</b></span><br />" +
                       "<span> " + item[i].ValComentario + "</span> " +
                       "<input id='star" + i + "' type='number' data-size='xs' class='rating' data-show-clear='false' disabled='disabled' data-show-caption='false' " +
                       "data-clearable='remove' data-step='1' value='" + item[i].Calificacion + "' /></li> ";
            }
            div += '</div>';
            $('#listaComentarios').append(div);
            for (var i = 0; i <= item.length - 1; i++) {
                $("#star" + i).rating("refresh", { disabled: true, showClear: false });
            }
        }

        function SetTabSessionValueFailed() {
            alert('call failed');
        }
        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }
    </script>

    <style type="text/css">
    
    </style>
</head>
<body onload="Initialize();">
    <form id="form1" runat="server">
        <div id="wrap">
            <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav nav-justified">
                       <li runat="server" id="paginaprincipal"><a href="<%= Page.ResolveUrl("~/PaginaPrincipalBT.aspx") %>">Principal</a></li>
                    <li runat="server" id="posicion"><a href="<%= Page.ResolveUrl("~/BusquedaComerciosGeoreferenciado.aspx") %>">Posición</a></li>
                    <li runat="server" id="ampliada"><a href="<%= Page.ResolveUrl("~/BusquedaComercios.aspx") %>">Busqueda ampliada</a></li>
                    <li runat="server" id="cercanos"><a href="<%= Page.ResolveUrl("~/BusquedaComerciosCercanos.aspx") %>">Cercanos</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Gestiones <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="active" runat="server" id="comercios"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeComercios.aspx") %>">Gestión comercio</a></li>
                            <li runat="server" id="usuarios"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeUsuariosFinales.aspx") %>">Gestión Usuario final</a></li>
                            <li runat="server" id="productos"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoDeProductos.aspx") %>">Mantenimiento de productos</a></li>
                            <li runat="server" id="rubros"><a href="<%= Page.ResolveUrl("~/Mantenimientos/MantenimientoRubros.aspx") %>">Mantenimiento de rubros</a></li>
                            </ul>
                        </li>
                        <li></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true">
                            <asp:Label ID="lblUsuario" runat="server">Usuario: </asp:Label></span></a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
                <!--/.container -->
            </div>

            <div class="wr-w" style="background-color: #CCC; position: absolute; width: 100%; height: 1200px; top: 50px; left: 0%; padding: 15px; z-index: 2;">
                <div class="m-business-card--wrapper span-16" style="position: absolute; width: 85%; height: 1100px; top: 20px; left: 100px; padding: 15px; z-index: 2;">
                    <div class="m-business-card--contents">
                        <div class="l-twoThirds column m-business-card--details">
                            <h1 id="businessTitle" runat="server" class="m-business-card--name tit " itemprop="name">Sin datos</h1>
                            <p itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress" class="m-business-card--address">
                                <span id="Direccion" runat="server"></span>
                            </p>
                            <input type="number" data-size="xs" data-clearable="remove" class="rating" disabled="disabled"
                                data-show-caption="false" data-show-clear="false" runat="server" data-step="1" value="5" />
                            <p class="m-business-card--phone">
                                <i class="m-icon--phone"></i>
                                <span itemprop="telephone" id="telephone" runat="server"></span>
                            </p>
                            <br />
                            <a id="webComercio" runat="server"></a>
                            <br />
                            <a id="webCorreo" runat="server"></a>
                        </div>
                        <section id="sectionRedesSociales" class="m-business-card--social l-oneThird column last" style="position: absolute; width: 170px; height: 200px; top: 20px; left: 250px; padding: 15px; z-index: 2;">
                            <h2>Redes Sociales</h2>

                            <a id="Comfb" runat="server" class="fa PaolClick omn_fShareFacebook_0" title="Facebook" target="_blank" rel="nofollow">
                                <img src="" style="width: 32px; height: 32px;" /></a>
                            <span class="visuallyHidden">Facebook</span>
                            <a id="Comtw" runat="server" class="tu PaolClick omn_fShareTwitter_0" title="Twitter" target="_blank" rel="nofollow">
                                <img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNzBweCIgaGVpZ2h0PSI3MHB4IiB2aWV3Qm94PSIwIDAgNzAgNzAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDcwIDcwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJCYXNlXzFfIj4NCgk8Zz4NCgkJPHJlY3QgeD0iMCIgZmlsbD0iIzQ1QjBFMyIgd2lkdGg9IjcwIiBoZWlnaHQ9IjcwIi8+DQoJPC9nPg0KPC9nPg0KPGcgaWQ9InR3aXR0ZXIiPg0KCTxnPg0KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNTAuOTg4LDMzLjYyNGMzLjY1NC0xLjYxMSwzLjQ1OS0yLjc1MSwzLjQ1OS0yLjc1MWMtMi4zNTQsMS41MTQtNC44NTksMC42MTItNC44NTksMC42MTINCgkJCWMtMi4wMTgtNy43MDgtNy43OTktOC4wMjgtNy43OTktOC4wMjhjMi4yMjctMS4xNzQsMi4yODctMi4xMTcsMi4yODctMi4xMTdjLTAuNzU2LTAuNTM3LTIuMzA1LDAuNTIzLTIuMzA1LDAuNTIzDQoJCQljMC41OTgtMC40NjItMC4zMjItMS4yNzItMC4zMjItMS4yNzJjLTAuNzYsMC4xMTQtMS4zNCwxLjM1Ny0xLjM0LDEuMzU3YzAtMC4zNDctMC42NzgtMC42NzItMC42NzgtMC42NzINCgkJCWMtNC4wNzMsMS43MjctNi4yNzcsOS41NzQtNi4yNzcsOS41NzRjLTEyLjUwOC04LjMwNi0xMi44NzItNi41MjgtMTIuODcyLTYuNTI4Yy0xLjA1NiwyLjA2NSwyLjcyNSw0Ljc1MSwyLjcyNSw0Ljc1MQ0KCQkJbC0yLjE4LDAuMjIzYy0wLjQ5OCwxLjkxNiwyLjExMSwzLjc4NywyLjExMSwzLjc4N2MxLjAwNSwwLjUsMi4wMjEsMC4wMDksMi4wMjEsMC4wMDlsLTIuNTg0LDEuNjY4DQoJCQljMC4yNDYsMi42NTcsNC42NDYsMi43NDUsNC42NDYsMi43NDVjMC43NDcsMC44NC0xLjI0MiwxLjk1My0xLjI0MiwxLjk1M3MwLjI0NywxLjAxMSwwLjg3MywxLjQ5Mg0KCQkJYzAuNjg2LDAuNTI3LDEuNzU2LDAuNTI5LDEuNzU2LDAuNTI5Yy02LjM5NSw2LjkzMi0xNC40MzctMC4wNjEtMTQuNDM3LTAuMDYxYzAuOTMyLDQuMDI2LDkuNDIzLDEwLjA2OSwyMS41MTIsOC4wODcNCgkJCWM5Ljk0NS0xLjYzNCwxNC4wMzktMTMuNDkxLDE0LjAzOS0xMy40OTFjNC44NDYsMC4wMiw0Ljg3MS0yLjI1OSw0Ljg3MS0yLjI1OUM1MS4zMjgsMzQuMTcyLDUwLjk4OCwzMy42MjQsNTAuOTg4LDMzLjYyNHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==" style="width: 32px; height: 32px;" /></a>
                            <span class="visuallyHidden">Twitter</span>
                            <a id="Comgo" runat="server" class="go PaolClick omn_fShareGoogle_0" title="Google+" target="_blank" rel="nofollow">
                                <img src="" style="width: 32px; height: 32px;" /></a>
                            <span class="visuallyHidden">Google+</span>
                        </section>


                        <div id="myCarousel" class="carousel slide" data-ride="carousel" style="position: absolute; width: 34%; height: 250px; top: 0px; left: 38%; padding: 15px;">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class=""></li>
                                <li class="active" data-target="#myCarousel" data-slide-to="1"></li>
                            </ol>
                            <div class="carousel-inner" role="listbox">
                                <div class="item  active">
                                    <img src="" alt="First slide" />
                                    <div class="container">
                                        <div class="carousel-caption">
                                            <span style="word-wrap:break-word; position: absolute; height: 400%; width:140%; left: -20%; top: -800%;">
                                                <h1>Anuncios</h1>
                                            <p>Los anuncios de los comercios serán visualizados en esta sección.</p> </span> 

                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <img src="" alt="Second slide" />
                                    <div class="container">
                                        <div class="carousel-caption">
                                          <span id="textoAnuncio"  runat="server" style="word-wrap:break-word; position: absolute; height: 400%; width:140%; left: -20%; top: -800%;">
                                          </span> 
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>



                        <div class="well" style="background: #EEE; position: absolute; width: 27%; height: 231%; top: 0%; right: 0%; padding: 15px;">
                            <div id="comercioBarrio" runat="server" style="color: black;"></div>
                            <div id='map-canvas' style="position: absolute; left: 3%; right: 3%; width: 94%; height: 45%; top: 8%;"></div>

                            <div style="position: absolute; left: 0%; width: 100%; height: 30%; top: 55%; font-size: x-small;">
                                <div style="color: black;">Calificar y comentar el comercio.</div>
                                <br />
                                <input type="number" id="idpuntuacion" data-size="sm" data-clearable="remove" runat="server" data-step="1" value="1" />
                                <asp:TextBox ID="txtNuevoComentario" runat="server" TextMode="MultiLine" Style="color: black; height: 95px; width: 290px;"></asp:TextBox>
                                <asp:Button ID="btnNuevoComentario" runat="server" class="btn btn-primary" Font-Size="Smaller" Text="Agregar Comentario" Width="106px"
                                    OnClick="btnNuevoComentario_Click" />
                                <asp:Label ID="lblComentarios" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
                            </div>
                        </div>
                        <div style="border-bottom: 2px solid #EEE; position: absolute; width: 72.2%; height: 40px; top: 107%; left: 0%;">
                            <button id="btnInformacion" type="button" class="btn btn-info active">Descripción</button>
                            <button id="btnTags" type="button" class="btn btn-info active">Tags</button>
                            <button id="btnRubros" type="button" class="btn btn-info active">Rubros</button>
                            <button id="btnSucursales" type="button" class="btn btn-info">Sucursales</button>
                        </div>
                        <div class="tit-head _mip-hbg _mip-txt" style="background: #EEE; color: #000; font-size: 15px; font-weight: bold; padding: 8px 14px; text-transform: uppercase; position: absolute; width: 72.2%; height: 30px; top: 128%; left: 0%;">
                            <div id="cabezalDinamico">Descripción</div>
                        </div>
                        <div id="Dinamico" style="background: #fff; color: black; font-size: 10px; padding: 8px 14px; text-transform: uppercase; height: 200px; position: absolute; width: 72.2%; top: 140.3%; left: 0%;">
                        </div>
                    </div>
                    <div style="background: #EEE; color: black; position: absolute; width: 68.4%; height: 300px; top: 50%; left: 2.5%;">
                        <button type="button" class="btn btn-default btn-sm " onclick="CargarComentarios();" style="height: 13%; height: 40px;">
                            <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>Comentarios
                        </button>
                        <ul id="listaComentarios" class="list-group">
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </form>
    <asp:TextBox runat="server" ID="comercioId" Visible="false"></asp:TextBox>
    <asp:TextBox ID="txtLongitud" runat="server" Visible="false" class="form-control col-lg-9"></asp:TextBox>

</body>
</html>
